
$golden-ratio: 1.618;

// font families
$font-family-open-sans-condensed: 'Open Sans Condensed', sans-serif;
$font-family-open-sans: 'Open Sans', sans-serif;
$font-family-lato-serif: 'Lato', sans-serif;


/*************************************************************************
                      FONT-SIZE and  LINE-HEIGHT
/*************************************************************************/

// device font size
$f-s-mobile: 16px;
$f-s-tablet: 18px;
$f-s-desktop: 19px;

// set default font size to 100% of browser's font size
$f-s-default: 1rem;
// set default line height to golden ratio between default font size
$l-h-default: $f-s-default * $golden-ratio;

// small font size and line height
$f-s-small: $f-s-default * 0.7;
$l-h-small: $f-s-default * 1.1;

// code font-size and line height
$l-h-code: $l-h-default * 0.75;

// h1 font size and line height
$f-s-h1: $f-s-default * 3;
$l-h-h1: $l-h-default * 2;

// h2 font size and line height
$f-s-h2: $f-s-default * $golden-ratio;
$l-h-h2: $l-h-default * 1.45;

// h3 font size and line height
$f-s-h3: $f-s-default * 1.25;
$l-h-h3: $l-h-default * 1.125;

// letter spacing (l-s)
$l-s-default: 0.1rem;
$l-s-double: $l-s-default * 2;

// transition speed (t-s)
$t-s-M: 0.5s;


/*************************************************************************
                             TEXT ALIGNMENT
/*************************************************************************/

//---------------------------ALIGN-CENTER
figcaption,
#footer-main p:before,
table th,
#main-nav ,
.paginator ul,
#footer-quote,
#footer-main {
  text-align: center;
}

//----------------------------ALIGN-RIGHT

.blockquote > footer,
.env-header {
  text-align: right;
}

//----------------------------MISC
sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

/*************************************************************************
                             LETTER SPACING
/*************************************************************************/

//----------------------------DEFAULT
#footer-main,
.contact-form input[type="submit"] {
  letter-spacing: $l-s-default;
}

//----------------------------DOUBLE
.paginator,
#main-nav {
  letter-spacing: $l-s-double;
}


/*************************************************************************
                             FONT WEIGHT
/*************************************************************************/

//----------------------------NORMAL
 table th {
  font-weight: normal;
}

/*************************************************************************
                             FONT STYLE
/*************************************************************************/

//----------------------------STYLE-ITALIC
article > .blockquote {
   font-style: italic;
}

/*************************************************************************
                             TEXT-DECORATION
/*************************************************************************/

//----------------------------NONE
a {
  text-decoration: none ;
}


/*************************************************************************
                             TEXT TRANSFORM
/*************************************************************************/

//----------------------------UPPERCASE
#footer-main,
.paginator,
#main-nav,
abbr,
.post-meta,
.contact-form input[type="submit"] {
  text-transform: uppercase;
}


/*************************************************************************
                              FONT SIZE
/*************************************************************************/

//----------------------------DEFAULT
.contact-form input,
.contact-form textarea,
h4 {
  font-size: $f-s-default;
}

html {
  font-size: $f-s-mobile;
}

h1 {
  font-size: $f-s-h1;
}

h2 {
  font-size: $f-s-h2;
}

#main-nav,
h3 {
  font-size: $f-s-h3;
}


//----------------------------SMALL
small,
figcaption,
sub,
sup,
.alert {
  font-size: $f-s-small;
}

//----------------------------SMALLER
.definition,
.highlighter-rouge,
article > .blockquote,
abbr {
  font-size: smaller;
}



/*************************************************************************
                              LINE-HEIGHT
/*************************************************************************/

//----------------------------DEFAULT
body {
  line-height: $l-h-default;
}

h1 {
  line-height: $l-h-h1;
}

h2 {
  line-height: $l-h-h2;
}

h3 {
  line-height: $l-h-h3;
}


//----------------------------SMALL
small, .alert {
  line-height: $l-h-small;
}

//----------------------------CODE
figcaption,
.highlight {
  line-height: $l-h-code;
}

.definition {

  line-height: $l-h-default * 0.9;
}

//----------------------------0
sub {
  line-height: 0;
}

/*************************************************************************
                              FONT-FAMILY
/*************************************************************************/

//----------------------------DROID-SERIF
h1, h2, h3, h4, h5, h6 {
  font-family: $font-family-lato-serif;
}

//----------------------------OPEN-SANS
.contact-form input,
.contact-form textarea,
#wrapper {
  font-family: $font-family-open-sans;
}

#footer-main,
.paginator,
#main-nav {
  font-family: $font-family-open-sans-condensed;
}
